<template>
  <div
    class="searchBlog"
    :class="{
      darkW: themeRef.state.themeState == 'drak',
      lightW: themeRef.state.themeState == 'light',
    }"
  >
    <template v-if="loadingRef">
      <div
        style="
          box-sizing: border-box;
          border-radius: 5px;
          overflow: hidden;
          padding: 10px;
          width: 100%;
          display: flex;
          justify-content: space-around;
          margin-bottom: 10px;
        "
        :class="{
          dark: themeRef.state.themeState == 'drak',
          light: themeRef.state.themeState == 'light',
        }"
        v-for="item in 6"
        :key="item"
      >
        <el-skeleton
          animated
          style="--el-skeleton-circle-size: 60px; width: 12%"
        >
          <template #template>
            <el-skeleton-item variant="circle" />
          </template>
        </el-skeleton>
        <el-skeleton
          :rows="3"
          animated
          style="--el-skeleton-circle-size: 100px; width: 90%"
        />
      </div>
    </template>
    <template v-else>
      <div class="searchBoxContent">
        <div v-for="(item, index) in topicArrRender" :key="item.id">
          <topicItemComp
            :topicItemInfo="item"
            :level="(getPage - 1) * getNumber + index + 1"
          ></topicItemComp>
        </div></div
    ></template>
  </div>
</template>
<script lang="ts">
import { Vue, Options } from "vue-class-component";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import Axios from "../../../utils/Axios";
import "../../../utils/type";
import topicItemComp from "./components/topicItemComp/topicItemComp.vue";
@Options({
  components: { topicItemComp },
  mounted() {
    Axios.get("/topic/queryTopicList", {
      params: {
        getNumber: this.getNumber,
        getPage: this.getPage,
      },
    }).then((res: any) => {
      const { data } = res;
      this.topicArrRender = data.data;
      this.loadingRef = false;
    });
  },
})
export default class searchBlog extends Vue {
  // 主题
  themeRef: any = useStore();
  // 渲染数组
  topicArrRender: Array<topicTypeOf> = [];
  // 共有多少个话题
  topicCountNumber: number = 0;
  // 一页多少个数据
  getNumber: number = 10;
  // 有多少业
  getPage: number = 1;
  loadingRef: boolean = true;
}
</script>

<style lang="less" scoped>
@import url("../../../assets/less/global.less");
@import url("./index.less");
</style>